<template>
  <!-- 系统设置模块-核保员等级设置页面 -->
  <div class="fillcontain">
    <!-- 标题 -->
    <div class="fastQuery">
      <el-row>
        <el-col :span="6" class="fastQuery_title">
          <i class="el-icon-tickets"></i><span> 核保员等级设置</span></el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div>
    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <el-button type="danger" plain @click="doAdd">新增</el-button>
        </el-col>
      </el-row>
      <div class="table_container">
        <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column
              property="operatorId"
              label="核保员ID"
              align='center'>
          </el-table-column>
          <el-table-column
              property="operatorName"
              label="核保员名称"
              align='center'>
          </el-table-column>
          <el-table-column
              property="level"
              label="核保人等级"
              align='center'>
            <template slot-scope="scope">
              <span v-for="item in operLevels"
                    v-if="item.value == scope.row.level">{{item.label}}</span>
            </template>
          </el-table-column>
          <el-table-column
              property="distributionStatus"
              label="是否参与分配"
              align='center'>
            <template slot-scope="scope">
              <span v-for="item in isOrNot" v-if="item.value == scope.row.distributionStatus">{{item.label}}</span>
            </template>
          </el-table-column>
          <el-table-column
              property="onlineStatus"
              label="是否在线"
              align='center'>
            <template slot-scope="scope">
              <span v-for="item in isOrNot" v-if="item.value == scope.row.onlineStatus">{{item.label}}</span>
            </template>
          </el-table-column>
		  <el-table-column
		      property="onlineStatus"
		      label="是否总公司核保员"
		      align='center'>
		    <template slot-scope="scope">
		      <span v-for="item in isOrNot" v-if="item.value == scope.row.headStatus">{{item.label}}</span>
		    </template>
		  </el-table-column>
          <el-table-column
              width="200"
              property="loginTime"
              label="最后登录时间"
              align='center'>
            <template slot-scope="scope">
              <span>{{scope.row.loginTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">
              <span class="operationIcon" @click="doDelete(scope.row.id)">
                <!-- 删除 -->
                <el-tooltip class="item" effect="light" content="删除" placement="top">
                    <i class="el-icon-delete"></i>
                </el-tooltip>
              </span>
              <span class="operationIcon ml10" @click="doUpdate(scope.row.id)">
                <!-- 修改 -->
                <el-tooltip class="item" effect="light" content="修改" placement="top">
                  <i class="el-icon-edit"></i>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="35%" center>
      <el-form ref="operForm"
               :model="oneOperator"
               :rules="oneOperatorRules"
               label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="核保员ID" prop="operatorId">
              <el-input clearable v-model="oneOperator.operatorId" placeholder="核保员ID" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="核保员名称" prop="operatorName">
              <el-input clearable v-model="oneOperator.operatorName" placeholder="核保员名称" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="核保员等级" prop="level">
              <el-select clearable v-model="oneOperator.level" placeholder="请选择">
                <el-option
                    v-for="item in operLevels"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否参加分配" prop="policyNo">
              <el-select clearable v-model="oneOperator.distributionStatus" placeholder="请选择">
                <el-option
                    v-for="item in isOrNot"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
		  <el-col :span="24">
		    <el-form-item label="是否总公司核保员" prop="policyNo">
		      <el-select clearable v-model="oneOperator.headStatus" placeholder="请选择">
		        <el-option
		            v-for="item in isOrNot"
		            :key="item.value"
		            :label="item.label"
		            :value="item.value">
		        </el-option>
		      </el-select>
		    </el-form-item>
		  </el-col>
          <el-col :span="24">
            <el-form-item label="是否在线" prop="policyNo">
              <el-select clearable v-model="oneOperator.onlineStatus" placeholder="请选择" :disabled="disabled">
                <el-option
                    v-for="item in isOrNot"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="最后登录时间" prop="policyNo">
              <el-input v-model="oneOperator.loginTime" readonly placeholder="最后登录时间"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSaveOrUpdate('operForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    doUnderwriterAdd,
    doUnderwriterDelete,
    doUnderwriterUpdate,
    getOneUnderwriter,
    getUnderwriterPage,
    validateId
  } from "@/api/setting";
  import constant from "@/utils/constant";

  export default {
    data() {
      var validateOperatorId = (rule, value, callback) => {
          if(this.title == '编辑核保员等级') {
            callback();
            return;
          }

          let para = {
              "operatorId": value
          }
          //this.$store.dispatch('loading/CHANGE_LOADING',true)
          validateId(para).then(res => {
              //this.$store.dispatch('loading/CHANGE_LOADING',false)
              if(res.resultCode == constant.SUCCESS){
                callback();
              } else {
                callback(new Error(res.resultMsg));
              }
          }).catch(err =>{
              callback(new Error('核保员id已存在'));
              // this.$store.dispatch('loading/CHANGE_LOADING',false);
          })

      };
      return {
        dialogFormVisible: false,
        title: '',
        disabled: false,
        // 查询条件
        rules: {
          operatorId: [],
          operatorName: [],
          level: []
        },
        searchParams: {
          operatorId: '',         //核保员ID
          operatorName: '',       //核保员名称
          level: '',              //核保员等级
          orgId: '',              //核保员对应机构
          distributionStatus: '', //是否分配
          onlineStatus: '',       //是否在线
        },
        tableData: [],
        // 单个核保员信息
        oneOperatorRules: {
          operatorId: [
            {required: true, message: '请输入核保员ID', trigger: 'change'},
            {validator: validateOperatorId, trigger: 'change' }
          ],
          level: [
            {required: true, message: '请选择等级', trigger: 'change'}
          ]
        },
        oneOperator: {
          id: '',                 // id
          status: '',             // 状态
          createId: '',           // 创建人ID
          createTime: '',         // 创建时间
          lastUpdateId: '',       // 更新人ID
          lastUpdateTime: '',     // 更新时间
          operatorId: '',         // 核保员ID
          operatorName: '',       // 核保员名称
          level: '',              // 核保员等级
          orgId: '',              // 核保员对应机构
          distributionStatus: '', // 是否分配
          onlineStatus: '',       // 是否在线
          loginTime: ''           // 最后登录时间
        },
        isOrNot: constant.isOrNot,
        operLevels: constant.operLevels,
        loading: false,
        //需要给分页组件传的信息
        paginations: {
          total: 0,      // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,  // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        }
      }
    },
    created() {
      this.subGetList();
    },
    mounted() {
    },
    methods: {
      // 分页查询
      getList() {
        this.loading = true;
        const params = {
          pageSize: this.paginations.pageSize,
          pageNumber: this.paginations.pageIndex
        };
        getUnderwriterPage(params).then(res => {
          this.loading = false;
          console.log('分页查询响应：', res);
          if (res.resultCode == constant.SUCCESS && res.data && res.data.total > 0) {
            this.paginations.total = res.data.total;
            this.tableData = res.data.rows;
          } else {
            this.tableData = [];
            this.initPaginations();
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      // 新增弹框
      doAdd() {
        this.initOneOperator();
        this.title = '新增核保员等级';
        this.disabled = false;
        this.dialogFormVisible = true;
      },
      // 编辑弹框
      doUpdate(id) {
        this.title = '编辑核保员等级';
        this.disabled = true;
        this.dialogFormVisible = true;
        getOneUnderwriter(id).then(res => {
          if (res.resultCode == constant.SUCCESS && res.data) {
            this.oneOperator = res.data;
          }
        });
      },
      doSubmit: function () {
        if (this.oneOperator.id == '') {
          doUnderwriterAdd(this.oneOperator).then(res => {
            if (res.resultCode == constant.SUCCESS) {
              this.dialogFormVisible = false;
              this.$message({
                type: 'success',
                message: '新增成功！'
              });
              this.subGetList();
            }
          });
        } else {
          doUnderwriterUpdate(this.oneOperator).then(res => {
            if (res.resultCode == constant.SUCCESS) {
              this.dialogFormVisible = false;
              this.$message({
                type: 'success',
                message: '修改成功！'
              });
              this.getList();
            }
          });
        }
      },
      // 保存节点数据
      doSaveOrUpdate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doSubmit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 删除
      doDelete(id) {
        doUnderwriterDelete(id).then(res => {
          if (res.resultCode == constant.SUCCESS) {
            this.$message({
              type: 'success',
              message: '删除成功！'
            });
            this.subGetList();
          }
        });
      },
      // 重置弹框内容
      initOneOperator() {
        this.oneOperator.id = '';
        this.oneOperator.status = '';
        this.oneOperator.createId = '';
        this.oneOperator.createTime = '';
        this.oneOperator.lastUpdateId = '';
        this.oneOperator.lastUpdateTime = '';
        this.oneOperator.operatorId = '';
        this.oneOperator.operatorName = '';
        this.oneOperator.level = '';
        this.oneOperator.orgId = '';
        this.oneOperator.distributionStatus = '';
        this.oneOperator.onlineStatus = '';
        this.oneOperator.loginTime = '';
      },
      // 重置分页条件
      initPaginations() {
        this.paginations.total = 0;
        this.paginations.pageIndex = 1;
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageIndex = 1;
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch(formName) {
        this.$refs[formName].resetFields();
      }
    },
    computed: {},
  }
</script>
<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e1e1e1;

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;

    .svg-icon {
      font-size: 14px;
      fill: #68a3fc;
    }
  }
</style>
